<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>skus</title>
    <script src="../static/vue.min.js"></script>

    <script src="../elements/element.js"></script>
    <link rel="stylesheet" href="../elements/element.css">
    <link rel="stylesheet" href="../static/layeropen.css">
    <script src="../static/axios.min.js"></script>
</head>

<body>
<div id="app">

    <div class="layui-form" lay-filter="ylSkuForm" style="display: none" id="ylSku">
        <input type="hidden" name="sku_id">
        <div class="layui-form-item">
            <label class="layui-form-label">sku名称</label>
            <div class="layui-input-block">
                <input type="text" name="sku_name" required  lay-verify="required" placeholder="请输入商品名" autocomplete="off" class="layui-input">
            </div>
        </div>

        <div class="layui-form-item">
            <label class="layui-form-label">sku商品介绍</label>
            <div class="layui-input-block">
                <input type="text" name="sku_desc" required  lay-verify="required" placeholder="请输入商品介绍" autocomplete="off" class="layui-input">
            </div>
        </div>

        <div class="layui-form-item">
            <label class="layui-form-label">sku商品标题</label>
            <div class="layui-input-block">
                <input type="text" name="sku_title" required  lay-verify="required" placeholder="请输入商品标题" autocomplete="off" class="layui-input">
            </div>
        </div>

        <div class="layui-form-item">
            <label class="layui-form-label">sku商品副标题</label>
            <div class="layui-input-block">
                <input type="text" name="sku_subtitle" required  lay-verify="required" placeholder="请输入商品副标题" autocomplete="off" class="layui-input">
            </div>
        </div>

        <div class="layui-form-item">
            <label class="layui-form-label">sku价格</label>
            <div class="layui-input-block">
                <input type="text" name="price" required  lay-verify="required" placeholder="sku价格" autocomplete="off" class="layui-input">
            </div>
        </div>

        <div class="layui-form-item">
            <label class="layui-form-label">sku所属品牌</label>
            <div class="layui-input-block">
                <select name="brand_id" lay-verify="required">
                    <option v-for="resultbrand in resultBrand" v-bind:value="resultbrand.brand_id">{{resultbrand.name}}</option>
                </select>
            </div>
        </div>

        <div class="layui-form-item">
            <label class="layui-form-label">sku所属分类</label>
            <div class="layui-input-block">
                <select name="catalog_id" lay-verify="required">
                    <option v-for="resultcategory in resultCategory" v-bind:value="resultcategory.cat_id">{{resultcategory.name}}</option>
                </select>
            </div>
        </div>

        <div class="layui-form-item">
            <div class="layui-input-block">
                <button class="layui-btn" lay-submit lay-filter="skuExit">点击修改</button>
                <button type="reset" class="layui-btn layui-btn-primary">重置</button>
            </div>
        </div>

    </div>


    <div style="display: none" id="skuImg">
        <el-form>
            <el-form-item label="商品介绍" prop="decript">
                <el-upload
                        :action="uploadUrl"
                        list-type="picture-card"
                        :show-file-list="false"
                        :on-success="uploadSuccess"
                        with-credentials="true">
                    <i class="el-icon-plus"></i>
                </el-upload>
            </el-form-item>


            <div class="demo-image__preview">

                <el-row>
                    <el-col v-for="(imagesattrs,index) in resultSkuImage" :span="2">
                        <i slot="default" style="float: right;" @click="removeImg(imagesattrs.img_url)"
                           class="el-icon-error"></i>
                        <el-image
                                style="width: 100px; height: 100px"

                                :src="imagesattrs.img_url"
                                :preview-src-list="imagesattrs.srcList">
                        </el-image>

                        <el-row>
                            <el-col :span="24" v-if="imagesattrs.default_img==1">
                                <input
                                        type="radio"
                                        checked
                                        name="add"
                                />设为默认
                            </el-col>
                            <el-col :span="24" v-else>
                                <input
                                        type="radio"
                                        name="add"
                                        @change="checkdeFauImg(index)"
                                />设为默认
                            </el-col>
                        </el-row>
                    </el-col>


                </el-row>

                <el-form-item>
                    <el-button type="primary" @click="onSubmit">立即创建</el-button>
                    <el-button>取消</el-button>
                </el-form-item>
            </div>
        </el-form>
    </div>


    <div class="layui-form-item layui-form">
        <div class="layui-inline">
            <label class="layui-form-label">分类</label>
            <div class="layui-input-inline" style="width: 100px;">
                <select id="catalog" name="catalog_id" lay-filter="aihao">
                    <option value=""></option>
                    <option v-for="category in resultCategory" :value="category.cat_id">{{category.name}}</option>
                </select>
            </div>
        </div>

        <div class="layui-inline">
            <label class="layui-form-label">品牌</label>
            <div class="layui-input-inline" style="width: 100px;">
                <select id="brand" name="brand_id" lay-filter="aihao">
                    <option value=""></option>
                    <option v-for="brand in resultBrand" :value="brand.brand_id">{{brand.name}}</option>
                </select>
            </div>
        </div>

        <div class="layui-inline">
            <label class="layui-form-label">检索</label>
            <div class="layui-input-inline" style="width: 100px;">
                <input type="text" id="skuName" name="" placeholder="请输入sku名" autocomplete="off" class="layui-input">
            </div>
        </div>


        <div class="layui-inline">
            <label class="layui-form-label">价钱</label>
            <div class="layui-input-inline" style="width: 100px;">
                <input type="text" id="begin" name="price_min" placeholder="￥" autocomplete="off" class="layui-input">
            </div>
            <div class="layui-form-mid">-</div>
            <div class="layui-input-inline" style="width: 100px;">
                <input type="text" id="end" name="price_max" placeholder="￥" autocomplete="off" class="layui-input">
            </div>
        </div>

        <div class="layui-inline">
            <div class="layui-input-inline" style="width: 100px;">
                <button class="layui-btn" id="searchSpu"><i class="layui-icon layui-icon-search"></i></button>
            </div>
        </div>

    </div>


    <div class="layui-row">
        <table id="skuTab" class="layui-col-md12" lay-filter="toolfilter"></table>
    </div>



    <!--    渲染优惠满减信息信息-->
    <div id="ManJian_Div" style="display:none; margin-top: 30px;margin-left: 120px">
        <form class="layui-form layui-form-pane" id="ManJian_up_form" lay-filter="ManJian_up_form">
            <!--            商品的满减ID和商品的阶梯价格ID-->
            <input type="text" :value="manjians.reduction_id" name="reduction_id" class="layui-input layui-hide">
            <input type="text" :value="manjians.ladder_id" name="ladder_id" class="layui-input layui-hide">
            <div class="layui-form-item">
                <label class="layui-form-label">满多少</label>
                <div class="layui-input-inline">
                    <input type="text" :value="manjians.full_price" name="full_price" placeholder="请输入满多少"
                           class="layui-input">
                </div>
            </div>

            <div class="layui-form-item">
                <label class="layui-form-label">减多少</label>
                <div class="layui-input-inline">
                    <input type="text" :value="manjians.reduce_price" name="reduce_price" placeholder="请输入减多少"
                           class="layui-input">
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">是否参与其他优惠</label>
                <div class="layui-input-inline">
                    <input type="checkbox"  id="add_statu"  :value="manjians.add_other" name="add_other"  lay-skin="switch"  lay-filter="switchTest" lay-text="是的呢|不是">
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">满几件</label>
                <div class="layui-input-inline">
                    <input type="text" :value="manjians.full_count" name="full_count" placeholder="请输入满几折"
                           class="layui-input">
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">打几折</label>
                <div class="layui-input-inline">
                    <input type="text" :value="manjians.discount" name="discount" placeholder="请输入打几折"
                           class="layui-input">
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">折后价</label>
                <div class="layui-input-inline">
                    <input type="text" :value="manjians.price" name="price" placeholder="请输入折后价" class="layui-input">
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">是否叠加其他优惠</label>
                <div class="layui-input-inline">
                    <input type="checkbox"  id="add_status"  :value="manjians.add_others" name="add_others"  lay-skin="switch"  lay-filter="switchTest" lay-text="是的呢|不是">
                </div>
            </div>
            <div class="layui-form-item" style="margin-left: 60px">
                <button type="button" class="layui-btn" lay-submit="" id="ManJian_up_Btn" lay-filter="ManJian_up_Btn">修改
                </button>
                <button type="reset" class="layui-btn layui-btn-primary">重置</button>
            </div>
        </form>
    </div>


</div>
</body>
<script src="../static/global.js"></script>
<script>
    let spuVue = new Vue({
        el: '#app',
        data: {
            resultBrand: [],//所有品牌
            resultCategory: [],//所有分类
            resultSkuImage: [],//所有sku图片
            uploadUrl: glodate.serverZuul + "brand/filesUpload",//上传图片地址
            skuId: "",
            sku_id: "",
            manjians: []

        },
        created() {
            this.findAllCategoryAndBrand()
        },
        methods: {
            //查找全部分类和品牌
            findAllCategoryAndBrand() {
                axios.get(glodate.serverZuul + "product/categoryandbrand").then(x => {
                    this.resultBrand = x.data.data.pms_brandList;//spu下的全部品牌
                    this.resultCategory = x.data.data.pms_categoryList;//spu下的全部分类
                })
            },
            findAllManJian(sku_id) {
                this.sku_id = sku_id;
                axios.get(glodate.serverZuul + "sku_ladder/find_admin_ManJian_All/" + sku_id).then(res => {
                    console.log(res);
                    console.log(res.data.add_others);
                    this.manjians = res.data
                    console.log(this.manjians);
                })
            },
            //查找当前sku下的全部图片
            getSkuImg(skuId) {
                this.resultSkuImage=[];
                this.skuId = skuId;
                axios.get(glodate.serverZuul + "product/findAllSkuImg/" + skuId)
                    .then(x => {
                        let xdata = x.data;
                        console.log(JSON.stringify(xdata))
                        xdata.forEach(item => {
                            let url = item.img_url;
                            let imageattr = {
                                'sku_id': item.sku_id,
                                'img_url': url,
                                'default_img': item.default_img,
                                'srcList': [{url}],
                            }
                            this.resultSkuImage.push(imageattr);
                            console.log(JSON.stringify(imageattr))
                        })

                    })
            },
            //图片上传成功的回显
            uploadSuccess(response, file, fileList) {
                console.log(response);
                let img = {
                    'img_url': response,
                    'srcList': [{response}],
                    'default_img': '',
                    'sku_id': this.skuId
                }
                this.resultSkuImage.push(img)
            },
            //删除图片
            removeImg(url) {
                alert(url)
                axios({
                    method: 'delete',
                    url: glodate.serverZuul + "brand/deletefiles",
                    params: {'objectName': url}, // 请求参数放在请求体
                    dataType: 'json',
                })

                const i = this.resultSkuImage.findIndex(x => x === url);
                this.resultSkuImage.splice(i, 1);
                //移除属性
                console.log(JSON.stringify(this.resultSkuImage));


            },
            //修改默认图片
            checkdeFauImg(index) {

                this.resultSkuImage.forEach(x => {
                    x.default_img = 0;
                })

                this.resultSkuImage[index].default_img = 1;
                //默认图片

            },
            //提交
            onSubmit() {

                axios.post(glodate.serverZuul + "product/addOrdelSkuImage", this.resultSkuImage)
                    .then(x => {
                        if (x.data.code == 200) {
                            alert("成功");
                        } else {
                            alert("服务器异常")
                        }
                    })
            }
        },
    })


    layui.use(['form', 'layer', 'table'], function () {
        let form = layui.form;
        let layer = layui.layer;
        let $ = layui.$;
        let table = layui.table;

        table.render({
            id: 'allSkuTabId'
            , elem: '#skuTab'
            , height: 312
            , url: glodate.serverZuul + "product/findAllSku" //数据接口
            , page: true //开启分页
            , cols: [[ //表头
                {field: 'sku_id', title: 'ID', width: 80, sort: true, fixed: 'left'}
                , {field: 'sku_name', title: '商品名称', width: 80}
                , {
                    title: '默认图片', width: 80, sort: true, templet: function (d) {

                        return '<img src="' + d.sku_default_img + '">';
                    }
                }
                , {field: 'price', title: '价格', width: 80}
                , {field: 'sale_count', title: '销量', width: 177}
                , {title: '操作', width: 255, sort: true, templet: '#operateSku'}
            ]]
        });

        //监听工具条
        table.on('tool(toolfilter)', function (obj) {
            let data = obj.data; //获得当前行数据
            let layEvent = obj.event; //获得 lay-event 对应的值（也可以是表头的 event 参数对应的值）
            let tr = obj.tr; //获得当前行 tr 的 DOM 对象（如果有的话）

            if (layEvent == "yuLan") {
                form.val('ylSkuForm',data)
                layer.open({
                     type:1,
                    title:"预览信息",
                    area:['600px','500px'],
                    content:$("#ylSku")
                })

            } else if (layEvent == "uploadPic") {
                let sku_id = data.sku_id;
                spuVue.getSkuImg(sku_id);//执行vue里的方法
                layer.open({
                    type: 1,
                    content: $('#skuImg'),
                    area: ['1200px', '600px'],
                    title: '正在修改图片'
                })
            } else if (layEvent == "ManJian") {
                let sku_id = data.sku_id;
                spuVue.findAllManJian(sku_id);//执行vue里的方法
                $.get(glodate.serverZuul + "sku_ladder/find_admin_ManJian_All/" + sku_id).then(res=>{
                    console.log(res);
                    console.log(res.add_others);
                    //渲染满减价格的
                    if(res.add_other == 1){
                        $("#add_statu").prop("checked", true)
                    }else{
                        $("#add_statu").prop("checked", false)
                    }
                    //渲染满减阶梯价格的
                    if(res.add_others == 1){
                        console.log(res.add_others == 1)
                        $("#add_status").prop("checked", true)
                    }else{
                        console.log(res.add_others == 1)
                        $("#add_status").prop("checked", false)
                    }
                    layui.form.render(); // 重新渲染。。。
                })


                layer.open({
                    type: 1,
                    title: "满减活动",
                    skin: 'demo-class',
                    area: ['600px', '500px'],
                    anim: 5,
                    fixed: false,
                    content: $("#ManJian_Div"), //这里content是一个普通的String
                })
                    return false;
            }
        })
        //商品的满减关联修改
        form.on('submit(ManJian_up_Btn)', function () {
            //获取输入框的所有值
            let datas = form.val('ManJian_up_form');
            datas.add_other = datas.add_other != null ? 1:0;
            datas.add_others = datas.add_others != null ? 1:0;
            $.ajax({
                url: glodate.serverZuul+"sku_ladder/up_admin_ManJian_All",
                type: "put",
                data: datas,
                dataType: "json",
                success: function (res) {
                    console.log(res);
                    if (res.code == 200) {
                        layer.msg("修改成功", {icon: 6,time:6000});
                    } else {
                        layer.msg(res.msg, {icon: 5});
                    }
                    setTimeout("location.reload()",2000);

                }
            })
            return false;
            layer.close();

        })


        //搜索
        $('#searchSpu').on('click', function () {
            let sku_name = $('#skuName').val();
            let brand_id = $('#brand').val();
            let catalog_id = $('#catalog').val();
            let begin = $('#begin').val();
            if (begin == "") {
                begin = 0;
            }
            let end = $('#end').val();
            if (end == "") {
                end = 100000000;
            }
            let price = begin + "-" + end;

            table.reload('allSkuTabId', {
                where: {
                    'sku_name': sku_name,
                    'brand_id': brand_id,
                    'catalog_id': catalog_id,
                    'betWeenPrice': price
                } //设定异步数据接口的额外参数
                //,height: 300
            });

            return false;
        })
        //修改
        form.on('submit(skuExit)',function (data){
            console.log(data.field)
            $.ajax({
                url:glodate.serverZuul+"skuInfo/exitSkuInfo",
                method:'put',
                data:data.field,
                success:function (res){
                    if(res.code==0){
                        layer.msg(res.msg,function (){
                            location.reload();
                        });

                    }else{
                        layer.msg(res.msg)
                    }
                }
            })
            return false;
        })

    })

</script>
<script type="text/html" id="operateSku">
    <input type="button" class="layui-btn layui-btn-normal layui-btn-sm" lay-event="yuLan" value="预览">
    <input type="button" class="layui-btn layui-btn-danger layui-btn-sm" lay-event="uploadPic" value="上传图片">
    <input type="button" class="layui-btn layui-btn-danger layui-btn-sm" lay-event="ManJian" value="满减">
</script>
</html>